---
import QueryCard from "../../components/queryCard.astro";
import { fetchRegistryPlugins } from "../../functions/fetchRegistryPlugins";
import type { plugin } from "../../functions/fetchRegistryPlugins";
import Main from "../../layouts/main.astro";

// Request the list of queries from the API
const { remoteQueries, plugins } = await fetchRegistryPlugins();

const pluginsMapper: Record<string, plugin> = {};
for (const plugin of plugins.plugins) {
    pluginsMapper[plugin.name] = plugin;
}

const pluginsWithQueries = new Set<string>();
for (const query of remoteQueries.queries) {
    if (query.required_plugins) {
        for (const plugin of query.required_plugins) {
            pluginsWithQueries.add(plugin);
        }
    }
}

// Get an array of plugin names that have queries
const pluginNamesWithQueries = Array.from(pluginsWithQueries).sort();

const allQueries = remoteQueries;
---

<Main
    title="Query hub - Anyquery"
    ogTitle="Anyquery - Pre-made SQL queries for any data source"
    description={`The query hub is a place where you can find pre-made SQL queries for Anyquery. 
Anyquery allows you to run SQL queries on pretty-much any data source`}
>
    <h1 class="text-3xl">Query hub</h1>
    <p class="text-sm text-white/70 mt-1">
        The query hub is a place where you can find pre-made SQL queries for
        Anyquery. <br />
        Answer questions on your data easily using Anyquery and its hub of queries.
    </p>

    <input
        id="search"
        aria-label="Search queries"
        type="text"
        placeholder="🔍 Search queries"
        class="w-full mt-4 p-2 pl-4 bg-black border border-[#262626] rounded-lg text-sm text-white/70"
    />
    <script>
        const searchElement = document.getElementById("search");
        if (searchElement) {
            searchElement.addEventListener("input", (e: Event) => {
                if (!(e.target instanceof HTMLInputElement)) {
                    return;
                }
                const search = e.target.value.toLowerCase();
                const queries = document.getElementById("queries")?.children;
                if (!queries) {
                    return;
                }
                for (let i = 0; i < queries.length; i++) {
                    const query = queries[i];
                    if (!(query instanceof HTMLElement)) {
                        continue;
                    }
                    const titleElement = query.querySelector("h3");
                    const descriptionElement = query.querySelector("p");
                    if (!titleElement || !descriptionElement) {
                        continue;
                    }
                    const title = titleElement.innerText.toLowerCase();
                    const description =
                        descriptionElement.innerText.toLowerCase();
                    if (
                        title.includes(search) ||
                        description.includes(search)
                    ) {
                        query.style.display = "flex";
                    } else {
                        query.style.display = "none";
                    }
                }
            });
        }
    </script>
    <h2 class="text-md mt-4 font-semibold text-white/90 mb-1 tracking-tight">
        Filter by plugin
    </h2>
    <div class="flex flex-wrap gap-2">
        {
            pluginNamesWithQueries.map((pluginName) => {
                const plugin = pluginsMapper[pluginName];
                if (!plugin) {
                    return;
                }
                return (
                    <a
                        class="flex items-center text-xs bg-white/10 px-4 py-2 rounded-md"
                        href={`/queries/plugin/${plugin.name}`}
                    >
                        <img class="h-4 w-4 mr-2" src={plugin.icon} alt="" />
                        {plugin.display_name}
                    </a>
                );
            })
        }
    </div>
    <a
        href="https://github.com/julien040/anyquery/tree/main/queries#how-to-submit-a-query"
        class="flex gap-2 mt-1 text-xs text-blue-400 items-center ml-auto hover:bg-white/10 px-4 py-2 rounded-md"
    >
        <svg
            width="20"
            height="20"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
            ><g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"
                ><path
                    d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12m10-8a8 8 0 1 0 0 16a8 8 0 0 0 0-16"
                ></path><path
                    d="M13 7a1 1 0 1 0-2 0v4H7a1 1 0 1 0 0 2h4v4a1 1 0 1 0 2 0v-4h4a1 1 0 1 0 0-2h-4z"
                ></path></g
            ></svg
        >
        <span>Add a query</span>
    </a>
    <div id="queries" class="grid md:grid-cols-2 grid-cols-1 gap-2 mt-2">
        {
            allQueries.queries
                .sort((a, b) => a.title.localeCompare(b.title))
                .map((query) => (
                    <QueryCard query={query} pluginsMapper={pluginsMapper} />
                ))
        }
    </div>
</Main>
